<template>
  <div class="bg">
    <div class="top_nav">
      <span>设置签到时间</span>
      <van-icon
        name="arrow-left"
        size="25"
        class="return_tap"
        color="#333333"
        @click="returnTap"
      />
      <div class="btn">完成</div>
    </div>
<div class="tip">签到时间由公司管理层统一决定，确定后员工仅在设定时间范围内才能签到</div>
<div class="sign_box" @click="show = true">
    <div class="time_title">签到时间</div>
    <div class="time_down"><span>8:00</span> <van-icon name="arrow-down" size="22" color="#797979" /></div>
</div>
<div class="sign_box" @click="show = true">
    <div class="time_title">签到时间</div>
    <div class="time_down"><span>8:00</span> <van-icon name="arrow-down" size="22" color="#797979" /></div>
</div>
 <div class="bottom_list" @click="skips('/repeattime')"><span>重复</span> <van-icon name="arrow" size="22" color="#797979" /></div>
<van-popup v-model="show" position="bottom">
   <van-datetime-picker
        v-model="currentDate"
        type="time"
        title="请选择时间"
        
        :formatter="formatter"
        @confirm='confirm'
        @cancel="cancel"
        />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
         minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show:false
    };
  },
  methods: {
      skips(path){
this.$router.push({path:path})
      },
    returnTap() {
      this.$router.go(-1);
    },
     formatter(type, val) {
           
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
            },
            confirm(){
                this.show = false
            },
            cancel(){
                this.show = false 
            }
    

  },
};
</script>
<style  scoped>
.bg {
  min-height: 100vh;
  background: #eeeeee;
}
.top_nav {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 50px;
  background: #4ac7d7;
}
.return_tap {
  position: absolute;
  left: 20px;
  top: 15px;
}
.btn {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 50px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background: #06c25f;
  color: #fff;
  border-radius: 2px;
}

.tip{
    background: #fff;
    padding: 5px 30px;
    font-size: 14px;
}

.sign_box{
    border-top: 10px solid #eee;
    padding: 30px;
    background: #fff;
}
.time_title{
    /* font-weight: 600; */
    margin-bottom: 10px;
    
}
.time_down{

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}
.bottom_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 20px 20px ;
      border-top: 10px solid #eee; 
    background: #fff;
    font-weight: 500;

}
</style>